<!doctype html>
<html>

  <head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link href="../css/mui.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="../css/1px.css" />
    <link href="../css/mui.picker.css" rel="stylesheet" />
    <link rel="stylesheet" href="../css/mui.poppicker.css" />
    <link rel="stylesheet" href="../css/mui.dtpicker.css" />
    <style>
      html {
        font-family: Roboto, Arial, "Noto Sans CJK SC", "Noto Sans CJK TC", "Pingfang SC", "Microsoft Yahei", "WenQuanYi Micro Hei", sans-serif;
      }
      
      body {
        overflow-x: hidden;
        background-color: #fff !important;
      }
      
      .mui-content {
        font-size: 13px;
        background-color: #fff;
      }
      
      .search-box {
        margin-top: 5px;
      }
      
      .head {
        margin-top: 10px;
        font-size: 14px;
        text-align: center;
        height: 30px;
        line-height: 30px;
        border-bottom: 1px solid #ccc;
        border-top: 1px solid #ccc;
      }
      /**/
      
      .mui-scroll-wrapper {
        top: 102px;
      }
      
      .list {
        font-size: 13px;
        text-align: center;
      }
      
      .list-all {
        border-bottom: 1px solid #ccc;
      }
      
      .goods-name,
      .change-num,
      .left-num {
        height: 42px;
        line-height: 42px;
      }
      
      .list-all .goods-name>span {
        display: inline-block;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      
      .event {
        margin: 0;
        padding: 0;
      }
      
      .time {
        font-size: 12px;
      }
      /**/
      
      .time-box {
        margin-top: 5px;
        padding: 0 10px;
      }
      
      .span-time {
        text-align: center;
        line-height: 24px;
        font-size: 14px;
      }
      
      .time-check {
        width: 90%;
        margin-left: 5%;
        border: 1px solid #C0C0C0;
        border-radius: 3px;
        line-height: 24px;
        font-size: 14px;
        color: #ACACB4;
        text-indent: 5px;
      }
      
      .type-check {
        width: 90%;
        margin-left: 3%;
        border: 1px solid #C0C0C0;
        border-radius: 3px;
        line-height: 24px;
        font-size: 14px;
        color: #ACACB4;
        text-indent: 5px;
      }
      
      .search-btn {
        border: 1px solid transparent;
        background-color: #ff6600;
        color: #fff;
        height: 28px;
        line-height: 26px;
        text-align: center;
        width: 80%;
        margin-left: 10%;
        border-radius: 2px;
        font-size: 14px;
        margin-top: 5px;
      }
      
      .search-btn:active {
        background-color: #e6c697;
      }
      
      .check-type {
        margin-top: 5px;
      }
      /**/
      .no{
      	text-align: center;
      	margin-top: 40px;
      	color: #CCCCCC;
      	font-size: 16px;
      }
      /**/
     .mask {
				position: absolute;
				z-index: 10;
				width: 100%;
				height: 100%;
				background-color: rgb(255, 255, 255);
				font-size: 18px;
				color: #999;
				text-align: center;
				padding-top: 50px;
			}
			/*加载*/
      .mui-pull-bottom-pocket {
        visibility: visible;
      }
      
      .mui-pull-bottom-pocket .mui-pull-loading {
        visibility: visible;
      }
    </style>
  </head>

  <body>
    <script src="../js/mui.min.js"></script>
    <script src="../js/mui.picker.js"></script>
    <script src="../js/mui.poppicker.js"></script>
    <script type="text/javascript" src="../js/mui.dtpicker.js"></script>
    <script type="text/javascript">
      mui.init()
    </script>
    <div id="app" class="mui-content">
    	<div class="mask" v-show="isInit">加载中...</div>
      <div class="search-box mui-row">
        <div class="mui-col-xs-5 mui-col-sm-5" style="padding-right: 10px;">
          <div class=" time-check fromTime" v-text="startTime">
            2017-12-01
          </div>
        </div>
        <div class="mui-col-xs-2 mui-col-sm-2 span-time">
          至
        </div>
        <div class="mui-col-xs-5 mui-col-sm-5" style="padding-left: 10px;">
          <div class="time-check endTime" v-text="endTime">
            2017-12-24
          </div>
        </div>
        <div class="mui-col-xs-9 mui-col-sm-9">
          <div class="type-check check-type" v-text="checkType">

          </div>
        </div>
        <div class="mui-col-xs-3 mui-col-sm-3">
          <div class="search-btn" @click="loadData">
            查询
          </div>
        </div>
      </div>
      <div class="head mui-row">
        <div class="mui-col-xs-3 mui-col-sm-3 vux-1px-r">
          礼品
        </div>
        <div class="mui-col-xs-2 mui-col-sm-2 vux-1px-r">
          变化
        </div>
        <div class="mui-col-xs-2 mui-col-sm-2 vux-1px-r">
          库存
        </div>
        <div class="mui-col-xs-5 mui-col-sm-5 ">
          事件
        </div>
      </div>
      <div class="mui-scroll-wrapper">
        <div class="mui-scroll">
          <div class="list" v-for="(item,index) in logs" :key='index'>
            <div class="list-all mui-row">
              <div class="goods-name mui-col-xs-3 mui-col-sm-3 vux-1px-r">
                <span v-text="goodsName">
              	</span>
              </div>
              <!--storageAmount:入库数量-->
              <div class="change-num mui-col-xs-2 mui-col-sm-2  vux-1px-r" v-text="item.storageAmount>0?'+'+item.storageAmount:'-'+Math.abs(item.outOfLibrary)">
              </div>
              <div class="left-num mui-col-xs-2 mui-col-sm-2 vux-1px-r" v-text="item.inventory">
              </div>
              <div class="event mui-col-xs-5 mui-col-sm-5">
                <div v-text="types[item.logStatus + 1].text"></div>
                <div class="time" v-text="fixTime(item.logTime)"></div>
              </div>
            </div>
          </div>
          <div class="no" v-show="logs.length===0">
          	暂无数据
          </div>
          <!--加载中-->
          <div class="mui-pull-bottom-pocket" v-show='isLoading'>
            <div class="mui-pull">
            	加载中...
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
  <script src="../config.js"></script>
  <script src="../js/vue.min.js"></script>
  <script>
    mui.plusReady(function() {
      var vm = new Vue({
        el: '#app',
        data: {
          currentShopObj: {},
          startTime: '2018-1-12',
          endTime: '2018-1-31',
          logStatus: '',
          logs: [],
          checkType: '全部事件',
          types: [{
            value: '',
            text: '全部事件'
          }],
          isInit: true,
          isLoading: false
        },
        mounted: function() {
          var day = new Date().getDate()
          this.startTime = new Date(new Date().setDate(day - 7 + 1)).format('yyyy-MM-dd')
          this.endTime = new Date().format('yyyy-MM-dd')
          this.receiveParams()
          this.bindEvent()
          this.loadData()
          setTimeout(function(){
          	vm.isInit = false
          },500)
          setTimeout(function(){
          	vm.setTypeChecker()
          },1000)
        },
        computed: {
          params: function() {
          	var minTime,maxTime
          	if(new Date(this.startTime).getTime()>new Date(this.endTime).getTime()){
          		maxTime = this.startTime
          		minTime = this.endTime
          	} else {
          		maxTime = this.endTime
          		minTime = this.startTime
          	}
            return {
              goodsId: this.goodsId,
              logStatus: this.logStatus,
              minTime: new Date(minTime + ' 00:00:00').getTime(),
              maxTime: new Date(maxTime + ' 23:59:59').getTime(),
              storeId: this.currentShopObj.storeId
            }
          }
        },
        methods: {
          bindEvent: function() {
            var vm = this
            //滚动
            mui('.mui-scroll-wrapper').scroll({
              scrollY: true,
              bounce: true,
              deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006，
            });
            //起始时间
            var options = {
              'type': 'date'
            }
            var startTimePicker = new mui.DtPicker(options)
            var startTime = document.querySelector(".fromTime")
            startTime.addEventListener('tap', function() {
              startTimePicker.show(function(item) {
                vm.startTime = item.text
              })
            })
            //结束时间
            var endTimePicker = new mui.DtPicker({
              'type': 'date'
            })
            var endTime = document.querySelector(".endTime")
            endTime.addEventListener('tap', function() {
              endTimePicker.show(function(item) {
                vm.endTime = item.text
              })
            })
          },
          //
          receiveParams: function() {
            var self = plus.webview.currentWebview()
            this.currentShopObj = self.currentShopObj
            this.goodsId = self.goodsId
            this.goodsName = self.goodsName
          },
          loadData: function() {
            var vm = this
            vm.logs = []
            vm.isLoading = true
            mui('.mui-scroll-wrapper').scroll().scrollTo(0, 0, 100)
            config.ajax({
              url: '/shopGoods/checkLog',
              data: this.params,
              success: function(res) {
                if(res.result === 1) {
                  console.log(JSON.stringify(res.logs))
                  vm.logs = res.logs
                  if(vm.types.length === 1) {
                    for(var i = 0; i < res.logStatus.length; i++) {
                      var obj = {}
                      obj.text = res.logStatus[i].status
                      obj.value = res.logStatus[i].index
                      vm.types.push(obj)
                    }
                  }
                  vm.isLoading = false
                }  else {
                	setTimeout(function(){
                		vm.isLoading = false
                	},500)
                	mui.toast(res.errormsg)
                }
              }
            })
          },
          //设置类别
          setTypeChecker: function() {
            var vm = this
            var typeCheck = document.querySelector(".type-check")
            var typePicker = new mui.PopPicker()
            typePicker.setData(vm.types)
            typeCheck.addEventListener('tap', function() {
              typePicker.show(function(item) {
                vm.checkType = item[0].text
                vm.logStatus = item[0].value
              })
            })
          },
          fixTime: function(time) {
            return new Date(time).format('yyyy-MM-dd hh:mm:ss')
          }
        }
      })
    })
  </script>

</html>